<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM--文档对象模型</title>
    <style>
        .top{
            /*float: right;*/
            position: absolute;
            left: 0;
            top: 0;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <h1 id="id1">h1元素对象1</h1>
    <h1 id="id2">h1元素对象2</h1>
    <h1 class="c1">h1元素对象3</h1>
    <h1 class="c1">h1元素对象4</h1>
    <h1 class="c1">h1元素对象5</h1>
    <h1 class="c1">h1元素对象6</h1>
    <h1 class="c1">h1元素对象7</h1>


    <img src="../img/1.png" id="img01">

    <div class="top">
        <p>爱好</p>
        <input type="checkbox" name="hobby" id="h1">
        <label for="h1">唱</label>
        <input type="checkbox" name="hobby" id="h2">
        <label for="h2">跳</label>
        <input type="checkbox" name="hobby" id="h3">
        <label for="h3">rap</label>
        <input type="checkbox" name="hobby" id="h4">
        <label for="h4">篮球</label>
    </div>


    <!--JavaScript的内部引入方式-->
    <script>
        /*这里面写的是JavaScript的代码*/

        //document.getElementById()函数
        // var e1=document.getElementById("id1");
        // var e2=document.getElementById("img01");
        // console.log(typeof e1)
        // alert(e1)
        // alert(e2)
        //练习：自动轮播图片
        //["../img/1.png","2.png","3.png","4.png","5.png"];
        // var i=1;
        // setInterval(function (){
        //     let e1=document.getElementById("img01");
        //     e1.src="../img/"+i+".png";//把图片路径拼接
        //     i++;//i自增
        //     if (i==4){
        //         i=1;
        //     }
        // },400)

        //
        /*
            根据id属性值获取元素对象，返回单个对象
            document.getElementById("id值")函数
         */

        /*
            根据标签名获取所有的标签对象，返回的是对象数组
            document.getElementsByTagName("标签名")
         */
        var h1s=document.getElementsByTagName("h1");
        for (let i = 0; i < h1s.length; i++) {
            console.log(h1s[i])
        }
        console.log("-------------------------")
        /*
            根据name属性值获取所有的元素对象，返回的是Element对象数组
         */
        var hobbys= document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            console.log(hobbys[i])
        }

        /*
            根据class属性的值获取所有的元素对象，返回的是Element对象数组
         */
        console.log("-------------------------")
        var tops=document.getElementsByClassName("top");
        for (let i = 0; i < tops.length; i++) {
            console.log(tops[i])
        }



    </script>


</body>
</html>